<template>
    <!--  外框架-->
    <div class="framework1">
        <!--      内框架-->
        <div class="framework2">
            <div class="top-class-table">
                <div class="header">
                    <div style="margin-left: 10px;font-weight: bold">门前五包->问题通知</div>
                </div>
                <!--      按钮行-->
                <div class="button_group">
                    <el-button-group>
                        <el-button type="primary" icon="DocumentAdd" @click="addPlaceProblem()"
                                   v-if="permissionIsShow.add">新增商户问题
                        </el-button>
                        <el-button type="primary" icon="DocumentAdd" @click="addAccountProblem()"
                                   v-if="permissionIsShow.add">新增个人问题
                        </el-button>
                    </el-button-group>
                    <el-input v-model="searchName" placeholder="单位名称/人员姓名"
                              style="width: 250px;margin-left: 15px;" clearable></el-input>
                    <el-input v-model="searchCard" placeholder="信用代码或营业执照号/身份证号"
                              style="width: 250px;margin-left: 15px;margin-right: 15px" clearable></el-input>
                    <el-select style="margin-right: 10px" v-model="searchIsPlace" placeholder="选择单位或个人" clearable>
                        <el-option label="单位" value="0"/>
                        <el-option label="个人" value="1"/>
                    </el-select>
                    <el-select style="margin-right: 10px" v-model="problemStatus" placeholder="是否通知用户" clearable>
                        <el-option label="已通知用户" value="1"/>
                        <el-option label="未通知用户" value="0"/>
                    </el-select>
                    <el-button type="primary" icon="Search" @click="searchProblem()">搜索</el-button>
                </div>

                <!--      表格-->
                <div style="height: calc(100vh - 134px)">
                    <el-table :data="problemNotificationDate" :row-style="{ height: '47px' }"
                              style="width: 100%;height:calc(100% - 68px)"
                              :header-cell-style="{ background: '#f4f3f9' }">
                        <el-table-column prop="companyName" label="单位名称/人员姓名" align="center"/>
                        <el-table-column prop="companyLicense" label="信用代码或营业执照号/身份证号" align="center"/>
                        <el-table-column prop="problem" label="问题描述" align="center"/>
                        <el-table-column prop="createTime" label="发现问题时间" align="center"/>
                        <el-table-column prop="telephone" label="联系方式" align="center"/>
                        <el-table-column label="状态" align="center" width="100">
                            <template #default="scope">
                                {{ scope.row.status === '0' ? '未通知' : '已通知' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="notes" label="通知备注" align="center">
                            <template #default="scope">
                                {{ scope.row.notes ? scope.row.notes : '暂无备注' }}
                            </template>
                        </el-table-column>

                        <el-table-column prop="process" label="商户/个人是否提交整改" align="center" width="150">
                            <template #default="scope">
                                {{ scope.row.process === '0' ? '未提交整改' : '已提交整改' }}
                            </template>
                        </el-table-column>

                        <el-table-column fixed="right" label="操作" width="200" align="center"
                                         v-if="permissionIsShow.edit || permissionIsShow.notify || permissionIsShow.delete">
                            <template #default="scope">
                                <el-button type="primary" size="small" icon="Edit" @click="editProblem(scope.row)"
                                           v-if="scope.row.status === '0' && permissionIsShow.edit">编辑
                                </el-button>
                                <el-button type="success" size="small" icon="phone" @click="notifyProblem(scope.row)"
                                           v-if="scope.row.status === '0' && permissionIsShow.notify">通知
                                </el-button>
                                <el-button type="danger" size="small" icon="Delete" @click="deleteProblem(scope.row.id)"
                                           v-if="permissionIsShow.delete">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--        页数导航栏-->
                    <div class="footer">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                       :page-sizes="[5, 10]" :page-size="pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="dialogVisible" @close="closeEdit">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="200px">
                <el-form-item v-if="isPlace === 1" label="人员姓名" prop="companyName">
                    <el-input v-model="form.companyName"/>
                </el-form-item>
                <el-form-item :label="isPlace === 0?'信用代码或营业执照号':'身份证号'" prop="companyLicense">
                    <el-input v-model="form.companyLicense"/>
                </el-form-item>
                <el-form-item v-if="isPlace === 1" label="联系方式" prop="telephone">
                    <el-input v-model="form.telephone"/>
                </el-form-item>
                <el-form-item label="问题描述" prop="problem">
                    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 8 }" v-model="form.problem"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitProblemForm()">提交
                    </el-button>
                    <el-button @click="closeEdit">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 通知弹窗 -->
        <el-dialog title="通知" v-model="notifyDialogVisible">
            <el-form :model="notesForm" :rules="rules" ref="notesFormRef" label-width="120px">
                <el-form-item label="通知备注" prop="notes">
                    <el-input v-model="notesForm.notes" placeholder="请输入备注（eg:已通过电话通知给商户）"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitNotesForm()">提交
                    </el-button>
                    <el-button @click="closeNotifyDialog">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </div>
</template>
<script>
    import request from "@/utils/request";


    export default {
        name: 'Place',
        data() {
            return {
                searchName: '',
                searchCard: '',
                searchIsPlace: '',
                problemStatus: '',
                problemNotificationDate: [],
                total: 0,
                currentPage: 1,
                pageSize: 10,
                notifyDialogVisible: false,
                dialogVisible: false,
                // 是否编辑
                isEdit: false,
                isPlace: '',
                userInfo: JSON.parse(localStorage.getItem('user')),
                form: {
                    id: '',
                    lawEnforcementOfficers: '', //执法人员ID
                    companyName: '', //商户公司名称
                    problem: '', //发现的问题
                },
                notesForm: {
                    id: '',
                    status: '1',
                    notes: '',
                },
                // 登录用户信息
                loginUserInfo: {
                    id: '',
                    responsibleScope: '', //查询范围
                    roleLevel: '', //角色等级
                    unitId: '', //内设部门ID
                    userRole: '', //角色ID
                    permissions: [], // 按钮路径（数据库中的path）
                },
                // 按钮权限
                permissionIsShow: {
                    add: false,
                    edit: false,
                    delete: false,
                    notify: false,
                },
            }
        },
        computed: {
            rules() {
                return {
                    companyName: [
                        { required: true, message: this.isPlace === 0 ? '请输入单位名称' : '请输入人员姓名', trigger: 'blur' }
                    ],
                    companyLicense: [
                        {
                            required: true,
                            message: this.isPlace === 0 ? '请输入信用代码或营业执照号' : '请输入身份证号',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[0-9a-zA-Z]+$/,
                            message: '无效字符',
                            trigger: 'blur'
                        },
                    ],
                    telephone: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                    ],
                    problem: [
                        { required: true, message: '请输入问题描述', trigger: 'blur' }
                    ],
                    notes: [
                        { required: true, message: '请输入通知备注', trigger: 'blur' }
                    ],
                };
            }
        },
        created() {
            const info = JSON.parse(localStorage.getItem("user"));
            this.loginUserInfo = {
                id: Number(info.id),
                responsibleScope: info.responsibleScope, //查询范围
                roleLevel: Number(info.roleLevel),
                unitId: Number(info.unitId),
                userRole: Number(info.userRole),
                permissions: info.permissions.filter(item => Number(item.menuId) === 38).map(item => item.path),
            }
            this.permissionIsShow = {
                add: this.loginUserInfo.permissions.includes('problemNotification-add'),
                edit: this.loginUserInfo.permissions.includes('problemNotification-edit'),
                delete: this.loginUserInfo.permissions.includes('problemNotification-delete'),
                notify: this.loginUserInfo.permissions.includes('problemNotification-notify'),
            }
        },
        mounted() {
            this.getProblemList();
        },


        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.getProblemList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getProblemList();
            },
            searchProblem() {
                this.getProblemList();
            },
            addPlaceProblem() {
                this.isPlace = 0;
                this.isEdit = false;
                this.dialogVisible = true;
            },
            addAccountProblem() {
                this.isPlace = 1;
                this.isEdit = false;
                this.dialogVisible = true;
            },
            deleteProblem(id) {
                // 询问是否删除
                this.$confirm('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get('/problem-notification/delete/' + id).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.getProblemList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            closeEdit() {
                this.dialogVisible = false;
                this.form = {};
                this.$refs.formRef.clearValidate()
            },
            submitProblemForm() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        this.form.isPlace = this.isPlace;
                        this.form.lawEnforcementOfficers = this.userInfo.id;
                        request.post('/problem-notification/edit', this.form).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.closeEdit();
                                this.getProblemList();
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        })
                    } else {
                        this.$message({
                            message: '请填写完整表单',
                            type: 'warning'
                        })
                    }
                })
            },
            editProblem(row) {
                this.isPlace = row.isPlace;
                this.isEdit = true;
                this.form = {...row};
                this.dialogVisible = true;
            },
            getProblemList() {
                request.get('/problem-notification/page', {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        name: this.searchName,
                        card: this.searchCard,
                        isPlace: this.searchIsPlace,
                        status: this.problemStatus,
                    }
                }).then(res => {
                    if (res.code == '200') {
                        this.problemNotificationDate = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            notifyProblem(row) {
                this.notifyDialogVisible = true;
                this.notesForm.id = row.id;
                this.notesForm.notes = row.notes;
                this.notesForm.isPlace = row.isPlace;
            },
            submitNotesForm() {
                this.$refs.notesFormRef.validate((valid) => {
                    if (valid) {
                        request.post('/problem-notification/noticeUpdateStatus', this.notesForm).then(res => {
                            if (res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.closeNotifyDialog();
                                this.getProblemList();
                            }
                        })
                    } else {
                        this.$message({
                            message: '请输入通知备注',
                            type: 'error',
                        });
                    }
                })

            },
            closeNotifyDialog() {
                this.notesForm = {
                    id: '',
                    status: '1',
                    notes: '',
                }
                this.notifyDialogVisible = false;
            },
        },
    }

</script>
<style scoped>
    #roleSpan {
        color: black;
        text-decoration: none;
    }

    /*   外框架   */
    .framework1 {
        height: calc(100vh - 88px);
        width: calc(100vh - 200px);
        margin-left: 8px;
        border: solid 1px #D3D3D3;
    }

    /*   内框架   */
    .framework2 {
        height: calc(100vh - 92px);
        border: solid 1px #D3D3D3;
    }

    /*   表格大标题   */
    .header {
        font-size: 16px;
        font-weight: bold;
        padding: 4px 20px;
        background-color: #D3D3D3;
    }

    /*   表格按键组   */
    .button_group {
        padding: 4px 10px;
        background-color: #DDDDDD;
    }

    /*   表格分页处   */
    .footer {
        padding: 4px 10px;
        background-color: #f4f3f9;
    }

    .el-dialog-image {
        height: 100px;
        width: 200px;
        margin-top: 10px;
        margin-right: 10px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.el-form-item__label) {
        line-height: 18px;
    }
</style>
